<template>
    <div style="width: 100%">
        <el-form label-width="95px" :label-position="labelPosition" style="margin-left: 3%;margin-right: 3%">
            <el-form-item label="标题 :">
                <span>{{title}}</span>
            </el-form-item>
            <el-form-item label="公告文件 :">
                <el-button type="text" @click="toFile">点击查看{{file}}</el-button>
            </el-form-item>
            <el-form-item label="案件二维码 :" v-if="showCode">
                <el-button type="text" @click="toCode">点击查看{{code}}</el-button>
            </el-form-item>
            <el-form-item label="附件 :">
                <el-table :data="enclosureList"
                          @cell-click="downloadFile"
                          border
                          style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="附件名">
                    </el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item label="附件下载地址 :">
                <span style="word-wrap: break-word;" id="compressFileUrl">{{compressFileUrl}}</span>
            </el-form-item>
            <el-button style="margin: 3% auto;text-align: center" type="primary" @click="toCopy">复制附件下载地址</el-button>
            <i class="el-icon-warning">
                温馨提示： 如果您遇到案件二 维码无法保存到手机的情况，请先尝试使用手机截屏功能来保存。带来不便，敬请谅解。</i>
        </el-form>
    </div>
</template>

<script>
    import util from 'assets/js/util.js'
    import conf from 'assets/js/conf.js'

    export default {
        data() {
            return {
                enclosureList: [],
                file: '',
                code: '',
                showCode: false,
                labelPosition: 'left',
                title: '',
                //form: {},
                compressFileUrl: '',
            }
        },
        mounted() {
            const _self = this;
            util.ajaxWithotToken({
                url: `/ext/bus/notice/info`,
                params: {eid: util.getUrlParam(document.location.href, 'eid')},
                success: function (data) {
                    _self.title = data.data.title;
                    _self.applyQrcode = data.data.applyQrcode;
                    _self.id = data.data.id;
                    _self.type = data.data.type;
                    _self.fileId = data.data.fileId;
                    _self.compressFileUrl = data.data.compressFileUrl;
                    util.ajaxWithotToken({
                        url: '/file/getFileList',
                        params: {eids: data.data.enclosureIds},
                        success: function (data) {
                            data.data.forEach(_file => _self.enclosureList.push({
                                id: _file.id,
                                name: _file.name,
                                url: _file.url,
                            }))
                        },
                    });
                    if (_self.type === 1) {
                        _self.showCode = true;
                    }
                },
            });
        },

        methods: {
            toCopy: function () {
                let Url = document.getElementById("compressFileUrl").innerText;
                let oInput = document.createElement('input');
                oInput.value = Url;
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象
                document.execCommand("Copy"); // 执行浏览器复制命令
                oInput.className = 'oInput';
                oInput.style.display = 'none';
                alert('复制成功');
            },
            downloadFile: function (row, column, cell, event) {
                window.open(conf.baseUrl + '/file/get/' + row.id + '?type=1')
            },
            toFile: function () {
                window.location.href = conf.baseUrl + '/file/get/' + this.fileId + '?type=1';
            },
            toCode: function () {
                window.location.href = conf.baseUrl + '/file/get/' + this.applyQrcode + '?type=1';
            },
        },
    }
</script>

<style scoped>
    .el-icon-warning {
        display: block;
        margin-top: 3%;
        color: red;
        font-size: 12px
    }
</style>